<template>
    <view>
        <view class="guDing">
            <!-----------------------搜索行----------------------->
            <view class="findSection">
                <navigator url="../search/search" class="toFind">
                    <icon type="search" size="15" color="#17B357"/> 30分钟极速达
                </navigator>
            </view>
            <!------------------------nav行------------------------>
            <view class="leftNavBox">
                <leftNav class="changeHeight" :pageKey="fruitLeftNavData"></leftNav>
            </view>
            <view class="shaiXuanNav">
                <view v-for="(item,index) in navContent" :key="index" :style="'color:'+item.color" @click="changeColor(index)">{{item.text}}</view>
            </view>
            <view>
                <!---------------------显示产品部分--------------------->
                <scroll-view class="showFruit" scroll-y="true" show-scrollbar="false">
                    <!--            <view v-if="fruitData.code==='400'">暂无数据</view>-->
                    <view>
                        <view v-for="(item,index) in fruitData.data" :key="index" class="goodsData">
                            <view class="imgBox">
                                <image :src="item.imgSrc" mode="center"></image>
                            </view>
                            <view class="neiRong">
                                <view>{{item.name}}</view>
                                <view>水果描述</view>
                                <view>{{item.guiGe}}</view>
                                <view>￥ {{item.price}} <view class="jiahao" @click="addToCar(item)">+</view></view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
        <!--------------------------购物车------------------------>
        <car :price="thisPrice"></car>
    </view>
</template>

<script>
    import car from "../../until/com/car";
    import leftNav from "../../until/com/leftNav";
    import until from "../../until/until"
    import * as api from '../../until/api'
    export default {
        name: "fruit",
        components:{
            car,leftNav
        },
        data(){
            return{
                //导航栏
                navContent:[
                    {text:'有货',color:'#000000'},
                    {text:'价格',color:'#000000'},
                    {text:'折扣',color:'#000000'},
                    {text:'筛选',color:'#000000'},
                ],
                //水果数据
                fruitData:{},
                thisPrice:0,   //加入购物车水果的价格
                fruitLeftNavData:'fruitLeftNavData'
            }
        },
        methods:{
            addToCar(goodsData){
                until.addToCar(goodsData);  //将该条数据添加至购物车
                this.thisPrice=parseInt(until.getMoneyNum());   //将价格传给购物车小图标
            },
            changeColor(index){
                this.navContent[index].color==='#000000' ?
                    this.navContent[index].color='#17B357' :
                    this.navContent[index].color='#000000';
            }
        },
        created() {
            uni.request({ //获取页面水果信息
                url:api.getFruitData,
                method:'POST',
                data:'',
                success:(res)=>{
                    this.fruitData=res.data;
                }
            });
            uni.request({//发起请求，获取左侧导航栏数据
                url:api.getAllFruitClass,
                method:'POST',
                data:'',
                success:resp=>
                    uni.setStorage({
                        key: 'fruitLeftNavData',
                        data:resp.data.data,
                        success: function () {
                            // console.log('success');
                        }
                    })
            })
        },
        onShow(){
            this.thisPrice=parseInt(until.getMoneyNum());   //将价格传给购物车小图标
        }
    }
</script>

<style scoped>
    /*固定*/
    .guDing{
        /*position: fixed;*/
        top: 0;
    }
    /*搜索*/
    .findSection{
        height: 3rem;
        width: 100%;
        background-color: #17B357;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
    .toFind{
        width: 95%;
        height: 2rem;
        text-align: center;
        border-radius: 1rem;
        background-color: #ffffff;
        color: #17B254;
        font-size: 1rem;
        line-height: 2rem;
    }
    .toFind>icon{
        line-height: 2.4rem;
    }
    /*横向导航栏*/
    .shaiXuanNav{
        width: 70%;
        height: 2rem;
        background-color: #ffffff;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        border-bottom: 1px solid #f4f4f4;
    }
    .shaiXuanNav>view{
        height: 2rem;
        text-align: center;
        line-height: 2rem;
        font-size: 1rem;
        color: #000000;
    }
    /*左侧导航栏*/
    .leftNavBox{
        width: 30%;
        float: left;
        overflow: hidden;
    }
    /*展示数据*/
    .showFruit{
        width: 70%;
        height: 32.5rem;
        float: left;
    }
    .goodsData{
        height: 6.2rem;
        padding: 0.5rem;
        display: flex;
        border-bottom: 1px solid #f4f4f4;
    }
    .imgBox{
        width: 40%;
        height: 100%;
    }
    .imgBox>image{
        width: 100%;
        height: 100%;
    }
    .neiRong{
        width: 60%;
        padding: 0 0.3rem 0 1rem;
        height: 6.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    .neiRong>view:nth-of-type(1){
        font-size: 1.1rem;
        font-weight: 500;
    }
    .neiRong>view:nth-of-type(2),.neiRong>view:nth-of-type(3){
        font-size: 0.7rem;
        color: #a2a19f;
    }
    .neiRong>view:nth-of-type(3){
        width: 60%;
        background-color: #f6f6f6;
        padding: 0.2rem 0.3rem;
    }
    .neiRong>view:nth-of-type(4){
        font-size: 1.2rem;
        color: #f7910a;
        display: flex;
        justify-content: space-between;
    }
    .jiahao{
        width: 1.2rem;
        height: 1.2rem;
        line-height: 1.1rem;
        border-radius: 0.6rem;
        font-size: 1.1rem;
        text-align: center;
        background-color: #17B254;
        color: #ffffff;
    }
</style>